<script setup>
import Form from '@/components/common/form.vue'

const props = defineProps({
  data: {
    type: Object,
    default: null
  }
})
function getStepActive() {
  let active = null
  if (!props.data) {
    return 0
  }
  
  if (props.data.status === 0) {
    active = 1
  } else if (props.data.status === 1) {
    active = 2
  } else if (props.data.status === 2) {
    active = 2
  }
  console.log(active)

  return active
}
</script>

<template>
  <div class="step-wrapper">
    <div class="apply-left" v-if="data && data.status >= 0">
      <el-steps direction="vertical" :active="getStepActive()" finish-status="success">
        <el-step title="实习申请" />
        <el-step title="申请等待" />
        <el-step title="申请结果" />
      </el-steps>
    </div>
    <div class="apply-right">
      <div v-if="getStepActive() === 0">
        <Form :data="formData" :formOpt="formOpt" :btnOpt="btnOpt" @handleForm="handleForm"></Form>
      </div>
      <div v-else-if="getStepActive() === 1">
        <div class="custom-alert">
          <div class="alert-icon">
            <i class="el-icon-success"></i>
          </div>
          <div class="alert-content">
            <h3 class="alert-title">实习申请已提交，请等待审核</h3>
            <p class="alert-desc">请耐心等待，审核结果将在3个工作日内通知</p>
          </div>
        </div>
      </div>
      <div v-else-if="getStepActive() === 2" class="result-container">
        <div
          class="custom-alert animate__animated"
          :class="props.data.status === 1 ? 'animate__shakeX' : 'animate__bounceIn'"
          :style="{
            backgroundColor: props.data.status === 1 ? '#fef0f0' : '#f0f9eb',
            borderColor: props.data.status === 1 ? '#fde2e2' : '#e1f3d8',
            boxShadow:
              props.data.status === 1 ? '0 0 10px rgba(245,108,108,0.2)' : '0 0 10px rgba(103,194,58,0.2)'
          }"
        >
          <div class="alert-icon">
            <i
              :class="[
                props.data.status === 1 ? 'el-icon-circle-close' : 'el-icon-circle-check',
                'animate__animated',
                props.data.status === 1 ? 'animate__wobble' : 'animate__rubberBand'
              ]"
              :style="{
                color: props.data.status === 1 ? '#f56c6c' : '#67c23a',
                fontSize: '32px'
              }"
            ></i>
          </div>
          <div class="alert-content">
            <h3
              class="alert-title animate__animated animate__fadeInDown"
              :style="{
                color: props.data.status === 1 ? '#f56c6c' : '#67c23a',
                fontSize: '20px',
                fontWeight: 'bold'
              }"
            >
              {{ props.data.status === 1 ? '实习申请审核未通过' : '实习申请审核通过' }}
              <i
                :class="props.data.status === 1 ? 'el-icon-warning' : 'el-icon-trophy'"
                class="title-icon"
              ></i>
            </h3>
            <p v-if="props.data.status === 1" class="alert-desc animate__animated animate__fadeInUp">
              <i class="el-icon-info desc-icon"></i>
              <text v-if="props.data.desc" class="desc-text">原因： {{ props.data.desc }}</text>
            </p>
            <div v-else class="success-animation">
              <i
                class="el-icon-star-on star-icon animate__animated animate__infinite animate__pulse"
              ></i>
              <span class="success-text">恭喜您通过审核!</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.step-wrapper {
  @include flex-center;
  width: 100%;
  height: 100%;
  .apply-left {
    width: 30%;
    height: 100%;
  }
  .apply-right {
    width: 50%;
  }
}
.custom-alert {
  padding: 20px;
  border-radius: 8px;
  background-color: #f0f9eb;
  border: 1px solid #e1f3d8;
  display: flex;
  align-items: center;
}
.alert-icon {
  color: #67c23a;
  font-size: 24px;
  margin-right: 15px;
}
.alert-content {
  flex: 1;
}
.alert-title {
  color: #67c23a;
  font-size: 16px;
  margin: 0 0 8px 0;
}
.alert-desc {
  color: #909399;
  font-size: 14px;
  margin: 0;
}
</style>
